<template>
  <div class="setting-container">
    <!-- 卡片 -->
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <el-row>
            <!-- 按钮 -->
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="shwoDialog = true"
              v-if="checkPoint('POINT-ROLE-ADD')"
              >新增角色</el-button
            >

            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="角色名" sortable width="180">
              </el-table-column>
              <el-table-column prop="description" label="描述" sortable>
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="{ row }">
                  <el-link @click="showPermission(row.id)" type="primary"
                    >分配权限</el-link
                  >
                  <el-link
                    style="margin:0 10px"
                    type="primary"
                    @click="edit(row.id)"
                    >修改</el-link
                  >
                  <el-link @click="doDel(row.id)" type="primary">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              style="text-align:center;"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pagesize"
              :total="pageInfo.total"
              layout="total, prev, pager, next"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="用户信息" name="second">
          <el-form
            label-width="80px"
            style="margin:20px 550px 0 100px;"
            :model="form"
          >
            <el-form-item label="企业名称">
              <el-input disabled v-model="comForm.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input disabled v-model="comForm.companyAddress"></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input disabled v-model="comForm.companyPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input disabled v-model="comForm.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input disabled v-model="comForm.remarks"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-dialog :title="title" class="tanchu" :visible.sync="shwoDialog">
        <el-form
          ref="addRules"
          @close="shwoDown"
          :rules="addRules"
          :model="addForm"
        >
          <el-form-item prop="name" label="角色名称" label-width="100px">
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="description" label="角色描述" label-width="100px">
            <el-input
              v-model="addForm.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="shwoDown">取 消</el-button>
          <el-button @click="add" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <!-- 分配权权限 弹出框 -->
    <el-dialog
      @close="cancelPerm"
      title="分配权限"
      :visible.sync="showPermDialog"
    >
      <el-tree
        ref="tree"
        check-strictly
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
      >
      </el-tree>
      <el-row type="flex" justify="center">
        <el-button @click="assinPermission" size="mini" type="primary"
          >确定</el-button
        >
        <el-button @click="cancelPerm" size="mini">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRolusInfo,
  delRolue,
  addRolue,
  editRolue,
  getRolue,
  getCompanyDetail
} from "@/api/setting";
import { mapGetters } from "vuex";

import { assignPermission } from "@/api/setting";
import { getPermissionList } from "@/api/permission";
import { transToTreeData } from "@/utils";
export default {
  name: "setting",
  data() {
    return {
      currentId: "",
      // 设置默认选中的数组
      checkedKeys: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      // 分配权限
      showPermDialog: false,
      treeData: [],
      comForm: {},
      addForm: {},
      form: {},
      activeName: "first",
      tableData: [],
      pageInfo: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      shwoDialog: false,
      addRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getRolusInfo();
    this.getComanyInfo();
  },
  methods: {
    // 点击分配权限的确定事件
    async assinPermission() {
      // 拿到选中的权限id
      let ids = this.$refs.tree.getCheckedKeys();
      await assignPermission({
        id: this.currentId,
        permIds: ids
      });

      this.$message.success("分配权限成功！");
      this.showPermDialog = false;
    },

    cancelPerm() {
      // 树形数据改为空
      this.treeData = [];
      // 选中的也改为空
      this.checkedKeys = [];
      this.showPermDialog = false;
    },
    // 分配权限点击显示
    async showPermission(id) {
      // 把被点的角色id存起来
      this.currentId = id;
      let res = await getPermissionList();
      // 调用递归转成树形结构赋值给tree去显示
      this.treeData = transToTreeData(res.data, "0");
      // 根据id获取当前角色详情
      let res2 = await getRolue(id);
      // 设置默认选中的id
      this.checkedKeys = res2.data.permIds;
      // 显示tree
      this.showPermDialog = true;
    },
    shwoDown() {
      this.addForm = {};
      this.$refs.addRules.resetFields();
      this.shwoDialog = false;
    },
    async getRolusInfo() {
      let res = await getRolusInfo(this.pageInfo);
      // console.log(res)
      this.pageInfo.total = res.data.total;
      this.tableData = res.data.rows;
    },
    async doDel(id) {
      await this.$confirm("确认要删除吗？");
      try {
        await delRolue(id);
        this.$message.success("删除成功！！！");
        this.getRolusInfo();
      } catch (error) {
        return;
      }
    },
    // 添加h和修改
    add() {
      // 表单验证
      this.$refs.addRules.validate(async v => {
        if (v) {
          if (this.addForm.id) {
            await editRolue(this.addForm);
          } else {
            await addRolue(this.addForm);
          }
          this.getRolusInfo();
          this.shwoDialog = false;
          this.$message.success(this.title + "成功");
        }
      });
    },
    // 获取员工信息
    async edit(id) {
      let res = await getRolue(id);
      this.addForm = res.data;
      this.shwoDialog = true;
    },
    async getComanyInfo() {
      let res = await getCompanyDetail(this.companyId);
      this.comForm = res.data;
      // console.log(res)
    }
  },
  computed: {
    title() {
      return this.addForm.id ? "编辑信息" : "新增员工";
    },
    ...mapGetters["companId"]
  }
};
</script>

<style lang="scss" scoped>
.setting-container {
  padding: 20px;
  .el-card {
    padding: 0 15px;

    .el-row {
      padding: 30px;
    }
    ::v-deep .tanchu {
      .el-dialog {
        .el-dialog__header {
          background-color: red;
        }
      }
    }
  }
}
</style>
